<script setup lang="ts">
defineOptions({
  name: 'ArticlePage',
})

import { onMounted, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { storeToRefs } from 'pinia'
import { useBlogStore } from '@/stores/useBlogStore'
import type { Timestamp } from '@/types/blog.types'
import { MdPreview, MdCatalog } from 'md-editor-v3'
import 'md-editor-v3/lib/preview.css'
import CommentSection from '@/components/custom/CommentSection.vue'
import ArticleExporter from '@/components/common/ArticleExporter.vue'
import { Vue3Lottie } from 'vue3-lottie'
import LoadingAnimationData from '@/assets/lotties/Wait I am Loading.json'

const route = useRoute()
const router = useRouter()
const blogStore = useBlogStore()
const { currentArticle, loading } = storeToRefs(blogStore)

// 目录相关
const catalogId = ref('article-catalog')
const scrollElement = ref<HTMLElement>()

// 获取文章
onMounted(async () => {
  // 设置滚动元素
  scrollElement.value = document.documentElement
  const id = route.params.id as string

  if (id) {
    try {
      // 判断是ID还是slug，调用对应的方法
      if (/^\d+$/.test(id)) {
        await blogStore.fetchArticle(id)
      } else {
        await blogStore.fetchArticleBySlug(id)
      }
    } catch (error) {
      console.error('获取文章失败:', error)
      // 可以添加错误处理，比如显示错误提示或跳转到404页面
      // 例如：router.push('/404') 或显示错误状态
    }
  }
})

// 简单的日期格式化
const formatDate = (date: Timestamp) => {
  if (!date) return '未知日期'
  try {
    return new Date(date).toLocaleDateString('zh-CN', {
      year: 'numeric',
      month: 'long',
      day: 'numeric',
    })
  } catch (error) {
    console.error('日期格式化错误:', error)
    return '日期格式错误'
  }
}

// 返回博客列表
const goBack = () => {
  router.push('/blog')
}
</script>

<template>
  <div class="article-page min-h-screen bg-base-100">
    <!-- Loading State -->
    <div v-if="loading" class="loading-container">
      <div
        class="flex flex-col items-center justify-center min-h-screen bg-gradient-to-br from-base-100 to-base-200"
      >
        <Vue3Lottie
          animationLink="https://lottie.host/7b4a9681-f4cf-4cb1-9b47-ba7459955f5a/HqGGXYEgun.lottie"
          :height="200"
          :width="200"
          :speed="1.2"
          :loop="true"
          :autoplay="true"
        />
        <div class="mt-6 text-center">
          <h3 class="text-xl font-semibold text-base-content mb-2">正在加载精彩内容...</h3>
        </div>
        <div class="mt-8 text-center max-w-md">
          <p class="text-base-content/60 text-sm">请稍候，我们正在为您准备最新的文章内容</p>
        </div>
      </div>
    </div>

    <!-- Article Not Found -->
    <div v-else-if="!currentArticle" class="not-found-container">
      <div class="flex flex-col items-center justify-center min-h-screen text-center px-4">
        <div class="mb-8">
          <div class="text-6xl mb-4">📄</div>
          <h1 class="text-4xl font-bold text-base-content mb-4">文章未找到</h1>
          <p class="text-base-content/70 mb-8 max-w-md">
            抱歉，您访问的文章不存在或已被删除。可能是链接有误或文章已被移动。
          </p>
        </div>
        <button @click="goBack" class="btn btn-primary btn-lg gap-2">
          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M15 19l-7-7 7-7"
            />
          </svg>
          返回博客列表
        </button>
      </div>
    </div>

    <!-- Loading State for Partial Data -->
    <div
      v-else-if="currentArticle && !currentArticle.id"
      class="flex justify-center items-center py-20"
    >
      <div class="loading loading-spinner loading-lg text-primary"></div>
      <span class="ml-4 text-lg text-base-content/70">数据加载中...</span>
    </div>

    <!-- Article Content -->
    <article v-else-if="currentArticle && currentArticle.id" class="article-container">
      <!-- Article Navigation Bar -->
      <nav
        class="sticky top-0 left-0 right-0 z-40 bg-base-100/95 backdrop-blur-md border-b border-base-300/50 shadow-sm"
      >
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div class="flex items-center justify-between h-16">
            <button
              @click="goBack"
              class="inline-flex items-center gap-2 text-base-content hover:text-primary transition-colors duration-200 group"
            >
              <i
                class="ph ph-arrow-left text-lg group-hover:-translate-x-1 transition-transform duration-200"
              ></i>
              <span class="font-medium">返回博客</span>
            </button>
            <div class="flex items-center gap-4">
              <div class="text-sm text-base-content/60 hidden sm:block">
                {{ currentArticle.readTime || 0 }} 分钟阅读
              </div>
              <div class="text-sm text-base-content/60 hidden md:block">
                {{ currentArticle.viewCount || 0 }} 次阅读
              </div>
              <!-- 导出按钮 -->
              <ArticleExporter
                v-if="currentArticle"
                :article="currentArticle"
                element-id="article-content"
              >
                <template #trigger="{ openModal, isExporting }">
                  <button
                    @click="openModal"
                    class="btn btn-ghost btn-sm hover:bg-primary/10 hover:text-primary transition-all duration-200"
                    :disabled="isExporting"
                    :title="`导出 ${currentArticle.title} 为 Markdown 格式`"
                  >
                    <i v-if="isExporting" class="ph ph-spinner animate-spin text-lg"></i>
                    <i v-else class="ph ph-download-simple text-lg"></i>
                    <span class="ml-1 font-medium">导出</span>
                  </button>
                </template>
              </ArticleExporter>
            </div>
          </div>
        </div>
      </nav>

      <!-- Article Hero Section -->
      <header class="article-hero relative">
        <!-- Cover Image Background -->
        <div
          v-if="currentArticle.coverImage"
          class="relative h-[50vh] sm:h-[60vh] min-h-[300px] sm:min-h-[400px] overflow-hidden"
        >
          <img
            :src="currentArticle.coverImage"
            :alt="currentArticle.title"
            class="absolute inset-0 w-full h-full object-cover"
          />
          <div
            class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/30 to-transparent"
          ></div>

          <!-- Hero Content Overlay -->
          <div class="absolute inset-0 flex items-end">
            <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 pb-8 sm:pb-16 w-full">
              <div class="text-white">
                <!-- Category Badge -->
                <div class="mb-3 sm:mb-4">
                  <span
                    class="inline-block px-3 py-1 sm:px-4 sm:py-2 rounded-full text-xs sm:text-sm font-medium backdrop-blur-sm border border-white/20"
                    :style="{
                      backgroundColor: (currentArticle.category?.color || '#ffffff') + '40',
                      color: '#ffffff',
                    }"
                  >
                    {{ currentArticle.category?.name || '未分类' }}
                  </span>
                </div>

                <!-- Title -->
                <h1
                  class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold mb-3 sm:mb-4 leading-tight"
                >
                  {{ currentArticle.title }}
                </h1>

                <!-- Excerpt -->
                <p
                  class="text-base sm:text-lg md:text-xl text-white/90 leading-relaxed mb-4 sm:mb-6 max-w-3xl line-clamp-2 sm:line-clamp-none"
                >
                  {{ currentArticle.excerpt }}
                </p>

                <!-- Meta Info -->
                <div
                  class="flex flex-wrap items-center gap-3 sm:gap-4 text-sm sm:text-base text-white/80"
                >
                  <time class="flex items-center gap-1 sm:gap-2">
                    <svg
                      class="w-3 h-3 sm:w-4 sm:h-4"
                      fill="none"
                      stroke="currentColor"
                      viewBox="0 0 24 24"
                    >
                      <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="2"
                        d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
                      />
                    </svg>
                    <span class="hidden sm:inline">{{
                      formatDate(currentArticle.publishDate || currentArticle.createdAt)
                    }}</span>
                    <span class="sm:hidden">{{
                      new Date(
                        currentArticle.publishDate || currentArticle.createdAt,
                      ).toLocaleDateString('zh-CN', { month: 'short', day: 'numeric' })
                    }}</span>
                  </time>
                  <span class="flex items-center gap-1 sm:gap-2">
                    <svg
                      class="w-3 h-3 sm:w-4 sm:h-4"
                      fill="none"
                      stroke="currentColor"
                      viewBox="0 0 24 24"
                    >
                      <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="2"
                        d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
                      />
                      <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="2"
                        d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
                      />
                    </svg>
                    {{ currentArticle.viewCount || 0 }}
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- No Cover Image Header -->
        <div v-else class="bg-gradient-to-br from-base-100 to-base-200 py-10 sm:py-16 md:py-20">
          <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
            <!-- Category Badge -->
            <div class="mb-4 sm:mb-6">
              <span
                class="inline-block px-3 py-1 sm:px-4 sm:py-2 rounded-full text-xs sm:text-sm font-medium"
                :style="{
                  backgroundColor: (currentArticle.category?.color || '#6b7280') + '20',
                  color: currentArticle.category?.color || '#6b7280',
                }"
              >
                {{ currentArticle.category?.name || '未分类' }}
              </span>
            </div>

            <!-- Title -->
            <h1
              class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold text-base-content mb-4 sm:mb-6 leading-tight"
            >
              {{ currentArticle.title }}
            </h1>

            <!-- Excerpt -->
            <p
              class="text-base sm:text-lg md:text-xl text-base-content/70 leading-relaxed mb-6 sm:mb-8 max-w-3xl"
            >
              {{ currentArticle.excerpt }}
            </p>

            <!-- Meta Info -->
            <div
              class="flex flex-wrap items-center gap-4 sm:gap-6 text-sm sm:text-base text-base-content/60"
            >
              <time class="flex items-center gap-1 sm:gap-2">
                <svg
                  class="w-3 h-3 sm:w-4 sm:h-4"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
                  />
                </svg>
                {{ formatDate(currentArticle.publishDate || currentArticle.createdAt) }}
              </time>
              <span class="flex items-center gap-1 sm:gap-2">
                <svg
                  class="w-3 h-3 sm:w-4 sm:h-4"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
                  />
                </svg>
                {{ currentArticle.readTime || 0 }} 分钟
              </span>
              <span class="flex items-center gap-1 sm:gap-2">
                <svg
                  class="w-3 h-3 sm:w-4 sm:h-4"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
                  />
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
                  />
                </svg>
                {{ currentArticle.viewCount || 0 }}
              </span>
            </div>
          </div>
        </div>
      </header>

      <!-- Article Content -->
      <main id="article-content" class="article-content bg-base-100">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 sm:py-8 md:py-12">
          <div class="flex flex-col xl:flex-row gap-6 lg:gap-8">
            <!-- 主要内容区域 -->
            <div class="flex-1 max-w-4xl">
              <!-- Author Info -->
              <div
                class="flex items-center gap-3 sm:gap-4 p-4 sm:p-6 bg-base-200/50 rounded-xl sm:rounded-2xl border border-base-300/50 mb-6 sm:mb-8 md:mb-12"
              >
                <div
                  class="w-12 h-12 sm:w-16 sm:h-16 bg-gradient-to-r from-primary to-secondary rounded-full flex items-center justify-center text-primary-content font-bold text-lg sm:text-xl shadow-lg flex-shrink-0"
                >
                  {{
                    (typeof currentArticle.author === 'string'
                      ? currentArticle.author
                      : currentArticle.author?.name || 'A'
                    ).charAt(0)
                  }}
                </div>
                <div>
                  <p class="font-semibold text-base-content text-base sm:text-lg">
                    {{
                      typeof currentArticle.author === 'string'
                        ? currentArticle.author
                        : currentArticle.author?.name || '未知作者'
                    }}
                  </p>
                  <p class="text-sm sm:text-base text-base-content/60">文章作者</p>
                </div>
              </div>

              <!-- Article Body -->
              <div class="prose prose-sm sm:prose-base lg:prose-lg max-w-none">
                <MdPreview
                  :editorId="catalogId"
                  :modelValue="currentArticle.content || ''"
                  :theme="'light'"
                  :previewTheme="'default'"
                  :codeTheme="'github'"
                  class="article-markdown-content"
                />
              </div>

              <!-- 移动端文章信息卡片 -->
              <div
                class="xl:hidden bg-base-200/30 rounded-xl p-4 sm:p-6 border border-base-300/30 mt-8 mb-8"
              >
                <h3
                  class="text-base sm:text-lg font-semibold text-base-content mb-4 flex items-center gap-2"
                >
                  <i class="ph ph-info text-base sm:text-lg text-primary"></i>
                  文章信息
                </h3>
                <div class="grid grid-cols-2 gap-3 sm:gap-4 text-xs sm:text-sm">
                  <div class="flex flex-col gap-1">
                    <span class="text-base-content/60">发布时间</span>
                    <span class="text-base-content font-medium">{{
                      formatDate(currentArticle.publishDate || currentArticle.createdAt)
                    }}</span>
                  </div>
                  <div class="flex flex-col gap-1">
                    <span class="text-base-content/60">阅读时间</span>
                    <span class="text-base-content font-medium"
                      >{{ currentArticle.readTime || 0 }} 分钟</span
                    >
                  </div>
                  <div class="flex flex-col gap-1">
                    <span class="text-base-content/60">阅读次数</span>
                    <span class="text-base-content font-medium"
                      >{{ currentArticle.viewCount || 0 }} 次</span
                    >
                  </div>
                  <div class="flex flex-col gap-1">
                    <span class="text-base-content/60">字数统计</span>
                    <span class="text-base-content font-medium"
                      >{{ (currentArticle.content || '').length }} 字</span
                    >
                  </div>
                </div>
              </div>

              <!-- 评论区域 -->
              <div class="mt-8 sm:mt-12 md:mt-16 pt-8 sm:pt-12 border-t border-base-300/50">
                <CommentSection :articleId="currentArticle.id" />
              </div>
            </div>

            <!-- 右侧导航栏 (桌面端) -->
            <aside class="hidden xl:block w-64 flex-shrink-0">
              <div class="sticky top-24">
                <!-- 目录导航 -->
                <div class="bg-base-200/30 rounded-2xl p-4 border border-base-300/30">
                  <h3
                    class="text-base font-semibold text-base-content mb-3 flex items-center gap-2"
                  >
                    <i class="ph ph-list text-base text-primary"></i>
                    文章目录
                  </h3>
                  <MdCatalog
                    :editorId="catalogId"
                    :scrollElement="scrollElement"
                    :scrollElementOffsetTop="80"
                    :theme="'light'"
                    class="article-catalog"
                  />
                </div>

                <!-- 文章信息卡片 -->
                <div class="bg-base-200/30 rounded-2xl p-4 border border-base-300/30 mt-4">
                  <h3
                    class="text-base font-semibold text-base-content mb-3 flex items-center gap-2"
                  >
                    <i class="ph ph-info text-base text-primary"></i>
                    文章信息
                  </h3>
                  <div class="space-y-2 text-xs">
                    <div class="flex items-center justify-between">
                      <span class="text-base-content/60">发布时间</span>
                      <span class="text-base-content text-right">{{
                        formatDate(currentArticle.publishDate || currentArticle.createdAt)
                      }}</span>
                    </div>
                    <div class="flex items-center justify-between">
                      <span class="text-base-content/60">阅读时间</span>
                      <span class="text-base-content">{{ currentArticle.readTime || 0 }} 分钟</span>
                    </div>
                    <div class="flex items-center justify-between">
                      <span class="text-base-content/60">阅读次数</span>
                      <span class="text-base-content">{{ currentArticle.viewCount || 0 }} 次</span>
                    </div>
                    <div class="flex items-center justify-between">
                      <span class="text-base-content/60">字数统计</span>
                      <span class="text-base-content"
                        >{{ (currentArticle.content || '').length }} 字</span
                      >
                    </div>
                  </div>
                </div>

                <!-- 分享按钮 -->
                <div class="bg-base-200/30 rounded-2xl p-4 border border-base-300/30 mt-4">
                  <h3
                    class="text-base font-semibold text-base-content mb-3 flex items-center gap-2"
                  >
                    <i class="ph ph-share-network text-base text-primary"></i>
                    分享文章
                  </h3>
                  <div class="flex flex-col gap-2">
                    <button class="btn btn-xs btn-outline gap-2">
                      <i class="ph ph-copy text-sm"></i>
                      复制链接
                    </button>
                    <button class="btn btn-xs btn-outline gap-2">
                      <i class="ph ph-twitter-logo text-sm"></i>
                      分享到微博
                    </button>
                  </div>
                </div>
              </div>
            </aside>
          </div>
        </div>
      </main>

      <!-- Article Footer -->
      <footer class="article-footer bg-base-200/30 border-t border-base-300/50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 sm:py-10 md:py-12">
          <div class="max-w-4xl mx-auto">
            <!-- Tags -->
            <div class="mb-8 sm:mb-10 md:mb-12">
              <h3
                class="text-lg sm:text-xl font-bold mb-4 sm:mb-6 text-base-content flex items-center gap-2"
              >
                <svg
                  class="w-4 h-4 sm:w-5 sm:h-5"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"
                  />
                </svg>
                相关标签
              </h3>
              <div class="flex flex-wrap gap-2 sm:gap-3">
                <span
                  v-for="tag in currentArticle.tags"
                  :key="tag.id"
                  @click="tag.slug ? $router.push(`/blog/tag/${tag.slug}`) : null"
                  :class="[
                    'px-3 py-1 sm:px-4 sm:py-2 bg-base-100 text-base-content rounded-lg sm:rounded-xl transition-all duration-300 transform shadow-sm border border-base-300/50 hover:shadow-md text-sm sm:text-base',
                    tag.slug
                      ? 'hover:bg-primary hover:text-primary-content cursor-pointer hover:scale-105 hover:border-primary hover:-translate-y-1'
                      : 'cursor-default',
                  ]"
                >
                  {{ tag.name }}
                </span>
              </div>
            </div>

            <!-- Back to Blog -->
            <div class="text-center">
              <button
                @click="goBack"
                class="btn btn-primary btn-sm sm:btn-md lg:btn-lg gap-2 sm:gap-3 shadow-lg hover:shadow-xl transition-all duration-300 w-full sm:w-auto"
              >
                <svg
                  class="w-4 h-4 sm:w-5 sm:h-5"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M15 19l-7-7 7-7"
                  />
                </svg>
                返回博客列表
              </button>
            </div>
          </div>
        </div>
      </footer>
    </article>
  </div>
</template>

<style scoped>
/* Markdown 预览组件样式定制 */
.article-markdown-content {
  background: transparent !important;
  color: hsl(var(--bc)) !important;
  line-height: 1.8;
}

/* 覆盖 md-editor-v3 的默认样式以适配主题 */
.article-markdown-content :deep(.md-editor-preview) {
  background: transparent !important;
  color: hsl(var(--bc)) !important;
}

.article-markdown-content :deep(.md-editor-preview h1),
.article-markdown-content :deep(.md-editor-preview h2),
.article-markdown-content :deep(.md-editor-preview h3),
.article-markdown-content :deep(.md-editor-preview h4),
.article-markdown-content :deep(.md-editor-preview h5),
.article-markdown-content :deep(.md-editor-preview h6) {
  color: hsl(var(--bc)) !important;
  border-bottom: none !important;
}

.article-markdown-content :deep(.md-editor-preview h2) {
  position: relative;
  padding-left: 1rem;
}

.article-markdown-content :deep(.md-editor-preview h2::before) {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 1.5rem;
  background: linear-gradient(to bottom, hsl(var(--p)), hsl(var(--s)));
  border-radius: 2px;
}

.article-markdown-content :deep(.md-editor-preview p) {
  color: hsl(var(--bc) / 0.8) !important;
  margin: 1rem 0;
}

.article-markdown-content :deep(.md-editor-preview code) {
  background: hsl(var(--b2)) !important;
  color: hsl(var(--bc)) !important;
  border: 1px solid hsl(var(--b3)) !important;
  border-radius: 0.25rem;
  padding: 0.25rem 0.5rem;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
}

.article-markdown-content :deep(.md-editor-preview pre) {
  background: hsl(var(--b3)) !important;
  border: 1px solid hsl(var(--b3)) !important;
  border-radius: 0.5rem;
  margin: 1.5rem 0;
}

.article-markdown-content :deep(.md-editor-preview pre code) {
  background: transparent !important;
  border: none !important;
  padding: 0;
}

.article-markdown-content :deep(.md-editor-preview blockquote) {
  border-left: 4px solid hsl(var(--p)) !important;
  background: hsl(var(--b2) / 0.5) !important;
  color: hsl(var(--bc) / 0.7) !important;
  margin: 1.5rem 0;
  padding: 1rem;
  border-radius: 0 0.5rem 0.5rem 0;
}

.article-markdown-content :deep(.md-editor-preview a) {
  color: hsl(var(--p)) !important;
  text-decoration: underline;
  text-decoration-color: hsl(var(--p) / 0.3);
  transition: all 0.3s ease;
}

.article-markdown-content :deep(.md-editor-preview a:hover) {
  color: hsl(var(--pf)) !important;
  text-decoration-color: hsl(var(--pf));
}

.article-markdown-content :deep(.md-editor-preview ul),
.article-markdown-content :deep(.md-editor-preview ol) {
  color: hsl(var(--bc) / 0.8) !important;
  margin: 1rem 0;
  padding-left: 1.5rem;
}

.article-markdown-content :deep(.md-editor-preview li) {
  color: hsl(var(--bc) / 0.8) !important;
  margin: 0.5rem 0;
}

.article-markdown-content :deep(.md-editor-preview table) {
  border-collapse: collapse;
  width: 100%;
  margin: 1.5rem 0;
  border: 1px solid hsl(var(--b3)) !important;
  border-radius: 0.5rem;
  overflow: hidden;
}

.article-markdown-content :deep(.md-editor-preview th),
.article-markdown-content :deep(.md-editor-preview td) {
  border: 1px solid hsl(var(--b3)) !important;
  padding: 0.75rem;
  text-align: left;
  color: hsl(var(--bc)) !important;
}

.article-markdown-content :deep(.md-editor-preview th) {
  background: hsl(var(--b2)) !important;
  font-weight: 600;
}

.article-markdown-content :deep(.md-editor-preview tr:nth-child(even)) {
  background: hsl(var(--b1) / 0.5) !important;
}

/* 图片响应式优化 */
.article-markdown-content :deep(.md-editor-preview img) {
  max-width: 100% !important;
  height: auto !important;
  border-radius: 0.75rem;
  box-shadow:
    0 10px 25px -5px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
  margin: 2rem auto;
  display: block;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.article-markdown-content :deep(.md-editor-preview img:hover) {
  transform: scale(1.02);
  box-shadow:
    0 20px 40px -10px rgba(0, 0, 0, 0.15),
    0 8px 12px -4px rgba(0, 0, 0, 0.1);
}

/* 视频响应式 */
.article-markdown-content :deep(.md-editor-preview video) {
  max-width: 100% !important;
  height: auto !important;
  border-radius: 0.75rem;
  margin: 2rem auto;
  display: block;
}

/* 表格响应式优化 */
.article-markdown-content :deep(.md-editor-preview table) {
  display: block;
  width: 100%;
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {
  .article-markdown-content :deep(.md-editor-preview table) {
    font-size: 0.875rem;
  }

  .article-markdown-content :deep(.md-editor-preview th),
  .article-markdown-content :deep(.md-editor-preview td) {
    padding: 0.5rem;
  }
}

/* 代码块响应式 */
.article-markdown-content :deep(.md-editor-preview pre) {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 640px) {
  .article-markdown-content :deep(.md-editor-preview pre) {
    font-size: 0.875rem;
    margin: 1rem -1rem;
    border-radius: 0;
  }
}

/* 引用块优化 */
.article-markdown-content :deep(.md-editor-preview blockquote) {
  position: relative;
  font-style: italic;
}

.article-markdown-content :deep(.md-editor-preview blockquote::before) {
  content: '"';
  position: absolute;
  top: -0.5rem;
  left: -0.5rem;
  font-size: 3rem;
  color: hsl(var(--p) / 0.3);
  font-family: serif;
  line-height: 1;
}

/* 标题锚点样式 */
.article-markdown-content :deep(.md-editor-preview h2),
.article-markdown-content :deep(.md-editor-preview h3),
.article-markdown-content :deep(.md-editor-preview h4) {
  scroll-margin-top: 6rem;
  position: relative;
}

/* 列表样式优化 */
.article-markdown-content :deep(.md-editor-preview ul li) {
  position: relative;
  padding-left: 0.5rem;
}

.article-markdown-content :deep(.md-editor-preview ul li::before) {
  content: '•';
  color: hsl(var(--p));
  font-weight: bold;
  position: absolute;
  left: -1rem;
}

.article-markdown-content :deep(.md-editor-preview ol li) {
  position: relative;
  padding-left: 0.5rem;
}

/* 分割线样式 */
.article-markdown-content :deep(.md-editor-preview hr) {
  border: none;
  height: 2px;
  background: linear-gradient(to right, transparent, hsl(var(--p) / 0.3), transparent);
  margin: 3rem 0;
}

/* 内联代码优化 */
.article-markdown-content :deep(.md-editor-preview p code),
.article-markdown-content :deep(.md-editor-preview li code) {
  font-size: 0.9em;
  font-weight: 500;
}

/* 响应式字体大小 */
@media (max-width: 640px) {
  .article-markdown-content :deep(.md-editor-preview) {
    font-size: 1rem;
    line-height: 1.7;
  }

  .article-markdown-content :deep(.md-editor-preview h1) {
    font-size: 1.875rem;
  }

  .article-markdown-content :deep(.md-editor-preview h2) {
    font-size: 1.5rem;
  }

  .article-markdown-content :deep(.md-editor-preview h3) {
    font-size: 1.25rem;
  }
}

/* 目录导航样式 */
.article-catalog :deep(.md-editor-catalog) {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

.article-catalog :deep(.md-editor-catalog-wrapper) {
  background: transparent !important;
  border: none !important;
}

.article-catalog :deep(.md-editor-catalog-link) {
  color: hsl(var(--bc) / 0.7) !important;
  text-decoration: none !important;
  padding: 0.5rem 0.75rem !important;
  border-radius: 0.5rem !important;
  transition: all 0.2s ease !important;
  font-size: 0.875rem !important;
  line-height: 1.4 !important;
  border-left: 2px solid transparent !important;
}

.article-catalog :deep(.md-editor-catalog-link:hover) {
  color: hsl(var(--p)) !important;
  background: hsl(var(--p) / 0.1) !important;
  border-left-color: hsl(var(--p)) !important;
}

.article-catalog :deep(.md-editor-catalog-link.active) {
  color: hsl(var(--p)) !important;
  background: hsl(var(--p) / 0.15) !important;
  border-left-color: hsl(var(--p)) !important;
  font-weight: 600 !important;
}

.article-catalog :deep(.md-editor-catalog-link[data-level='1']) {
  font-weight: 600 !important;
  font-size: 0.9rem !important;
}

.article-catalog :deep(.md-editor-catalog-link[data-level='2']) {
  padding-left: 1.25rem !important;
}

.article-catalog :deep(.md-editor-catalog-link[data-level='3']) {
  padding-left: 1.75rem !important;
  font-size: 0.8rem !important;
}

.article-catalog :deep(.md-editor-catalog-link[data-level='4']) {
  padding-left: 2.25rem !important;
  font-size: 0.8rem !important;
}

.article-catalog :deep(.md-editor-catalog-link[data-level='5']) {
  padding-left: 2.75rem !important;
  font-size: 0.75rem !important;
}

.article-catalog :deep(.md-editor-catalog-link[data-level='6']) {
  padding-left: 3.25rem !important;
  font-size: 0.75rem !important;
}
</style>
